<template>
	<div class="cascade-select">
		<u-input v-model="inputValue" :select-open="show" type="select" @click="open" :placeholder="placeholder" :clearable="true" :disabled="disabled" />
		<u-select v-model="show" mode="mutil-column-auto" :list="list" @confirm="confirm" :default-value="defaultArr"></u-select>
		<!-- <u-select v-model="show" mode="mutil-column" :list="list" @confirm="confirm"></u-select> -->
	</div>
</template>

<script>
export default {
	name: "vCascadeSelect",
	model: {
		prop: "value",
		event: "update:value",
	},
	props: {
		value: {
			type: Array,
			default: () => [],
		},
		placeholder: {
			type: String,
			default: "请选择",
		},
		filterable: {
			type: Boolean,
			default: false,
		},
		list: {
			type: Array,
			default: () => [],
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		separator: {
			type: String,
			default: "/",
		},
		readonly: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			show: false,
			inputValue: "",
			defaultArr: [0, 0],
		}
	},

	components: {},

	computed: {},

	methods: {
		open() {
			if (this.disabled || this.readonly) return
			this.show = true
		},
		confirm(e) {
			let value = e
			for (let i = 0; i < this.list.length; i++) {
				if (this.list[i].label == value[0]["label"]) {
					this.defaultArr[0] = i
					let item = this.list[i]
					for (let j = 0; j < item["children"].length; j++) {
						if (item["children"][j].label == value[1]["label"]) {
							this.defaultArr[1] = j
						}
					}
				}
			}
			this.inputValue = `${e[0].label} ${this.separator} ${e[1].label} `
			this.$emit("update:value", [e[0].value, e[1].value])
		},
	},
	watch: {
		value: {
			immediate: true,
			handler(val) {
				// console.log(val, "value")
				this.list.forEach(item => {
					if (item.value == val[0]) {
						this.inputValue = `${item.label} ${this.separator} `
						item.children.forEach(item => {
							if (item.value == val[1]) {
								this.inputValue += `${item.label}`
							}
						})
					}
				})
			},
		},
	},
}
</script>
<style lang="scss" scoped>
.cascade-select {
	width: 100%;
}
</style>
